<template>
  <div>
    <!-- 表单设计编辑 -->
    <div v-if="formType === 1">
      <a-range-picker
        v-if="setting.options.isRange"
        v-model:value="setting.options.defaultValue"
        :valueFormat="setting.options.format"
        :format="setting.options.format"
        :placeholder="[setting.options.startPlaceholder, setting.options.endPlaceholder]"
        :disabled="setting.options.disabled"
        :value-format="setting.options.format"
        :style="{ width: setting.options.width + '%' }"
      />
      <a-date-picker
        v-else
        v-model:value="setting.options.defaultValue"
        :valueFormat="setting.options.format"
        :format="setting.options.format"
        :placeholder="setting.options.placeholder"
        :disabled="setting.options.disabled"
        :value-format="setting.options.format"
        :style="{ width: setting.options.width + '%' }"
        :disabled-date="disabledDate"
      >
      </a-date-picker>
    </div>
    <!-- 表单展示 -->
    <div v-else>
      <!-- 表单展示编辑 -->
      <div v-if="setting.fieldState === 0">
        <a-range-picker
          v-if="setting.options.isRange"
          v-model:value="dataModel"
          :valueFormat="setting.options.format"
          :format="setting.options.format"
          :placeholder="[setting.options.startPlaceholder, setting.options.endPlaceholder]"
          :disabled="setting.options.disabled"
          :value-format="setting.options.format"
          :style="{ width: setting.options.width + '%' }"
        />
        <a-date-picker
          v-else
          v-model:value="dataModel"
          :valueFormat="setting.options.format"
          :format="setting.options.format"
          :placeholder="setting.options.placeholder"
          :disabled="setting.options.disabled"
          :value-format="setting.options.format"
          :style="{ width: setting.options.width + '%' }"
          :disabled-date="disabledDate"
        >
        </a-date-picker>
      </div>
      <!-- 表单展示只读 -->
      <div v-else>
        <a-input v-model:value="dataModel" disabled style="color: #595959; background-color: #fff; border: none"> </a-input>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  data() {
    return {
      dataModel: this.models[this.setting.table + '-' + this.setting.field],
    }
  },

  props: {
    formType: {
      type: Number,
      default: 0,
    },
    setting: {
      type: Object,
      default: null,
    },
    models: {
      type: Object,
      default: Object,
    },
  },
  created() {},
  methods: {
    // 时间选择限制
    disabledDate(current) {
      if (this.setting.options.disabledDateType === undefined) {
        var rangDate = this.setting.options.disabledDate

        if (rangDate !== undefined && rangDate.length > 0) {
          return current > moment(rangDate[1]).endOf('day') || current < moment(rangDate[0]).add(-1, 'd').endOf('day')
        } else {
          return false
        }
      } else if (this.setting.options.disabledDateType === '1') {
        return current && current > moment().endOf('day')
      } else if (this.setting.options.disabledDateType === '2') {
        return current && current < moment().endOf('day')
      }
    },
  },
  watch: {
    dataModel: {
      deep: true,
      handler(val) {
        this.models[this.setting.table + '-' + this.setting.field] = val
      },
    },
  },
}
</script>